<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getJobVoListApi">
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="handleOpenDialog(OptEnum.CREATE)"> 发布岗位 </el-button>
      </template>
      <template #title="scope">
        <div class="info-item-box">
          <div class="item-top-bar">
            <div class="title-bar">
              <h3>{{ scope.row.title }}</h3>
            </div>
            <div class="operation-bar">
              <el-icon @click="handleOpenDialog(OptEnum.EDIT, scope.row)"><Edit /></el-icon>
              <el-icon @click="handleDeleteMessageItem(scope.row)"><Delete /></el-icon>
            </div>
          </div>
          <div class="tip-bar">
            <span>编号&nbsp;{{ scope.row.code }}&nbsp;|&nbsp;</span>
            <span>{{ scope.row.typeName }}&nbsp;</span>
          </div>
        </div>
      </template>
      <template #welfare="scope">
        <div class="welfare-tip-bar">
          <h3>
            {{ filterEnum(scope.row.settleType, settlementEnum) }}
          </h3>
          <span>&nbsp;|&nbsp;{{ scope.row.priceStart }}</span>
          <span>{{ filterEnum(scope.row.priceType, priceTypeEnum) }}</span>
        </div>
        <div class="tag-bar">
          <el-tag v-for="(tag, idx) in getTags(scope.row.tags)" :key="idx">
            {{ tag }}
          </el-tag>
        </div>
      </template>
      <template #status="scope">
        <el-tag :type="scope.row.status === sysEnum.SIX ? 'danger' : ''" style="margin-left: 5px">
          {{ filterEnum(scope.row.status, jobStatusType) }}
        </el-tag>
      </template>
      <template #tongji="scope">
        <div class="info-view-box">
          <div class="info-viewcnt-box" @click="handleOpenViewWorkers(scope.row)">
            <div class="vcnt-number">
              {{ scope.row.viewCnt }}
            </div>
            <div class="vcnt-text">
              <span>浏览数</span>
            </div>
          </div>
          <div class="info-rsmcnt-box" @click="handleOpenApplyWorkers(scope.row)">
            <div class="vcnt-number">
              {{ scope.row.applyCnt }}
            </div>
            <div class="vcnt-text">
              <span>申请数</span>
            </div>
          </div>
        </div>
      </template>
      <template #operation>
        <div class="info-opt-box">
          <!-- <div class="opt-item" @click="handleGoden">黄金展位</div> -->
          <div class="opt-item" @click="handleRefresh">开启刷新</div>
        </div>
      </template>
    </ProTable>
    <JobDialog ref="dialogRef" @refresh-list="handleRefreshList" />
    <ViewJobWorkers ref="jvDialogRef" @refresh-list="handleRefreshList" />
    <ApplyJobWorkers ref="jwDialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import ProTable from "@/components/ProTable/index.vue";
//   import MessageItemDialog from "./components/MessageItemDialog.vue";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import { deleteJobApi, getJobVoListApi } from "@/api/modules/cpyjob/oddjob";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { JobVo } from "@/biz/interface/JobType";
import { jobStatusType, jobCntSearchType } from "@/biz/datas/jobData";
import { ElMessage } from "element-plus";
import { settlementEnum, priceTypeEnum } from "@/biz/datas/jobData";
import ViewJobWorkers from "./components/ViewJobWorkers.vue";
import ApplyJobWorkers from "./components/ApplyJobWorkers.vue";
import JobDialog from "./components/OddJobDialog.vue";

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "index", width: 60, label: "#", fixed: "left" },
  {
    prop: "title",
    label: "岗位信息",
    search: { el: "input" }
  },
  {
    prop: "welfare",
    label: "福利信息",
    width: 400
  },
  {
    prop: "status",
    label: "状态",
    width: 140,
    enum: jobStatusType,
    search: { el: "select" }
  },
  {
    prop: "tongji",
    label: "统计",
    width: 300
  },
  {
    prop: "applyCnt",
    label: "申请数",
    width: 130,
    isShow: false,
    enum: jobCntSearchType,
    search: { el: "select" }
  },
  {
    prop: "viewCnt",
    label: "浏览数",
    width: 130,
    isShow: false,
    enum: jobCntSearchType,
    search: { el: "select" }
  },
  {
    prop: "operation",
    fixed: "right",
    label: "操作",
    width: 300
  }
];

const getTags = computed(() => {
  return (tagsStr: string): string[] => {
    let tags: string[] = [];
    if (tagsStr && tagsStr.length) {
      tags = tagsStr.split(",");
    }
    return tags;
  };
});
//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

// 删除信息
const handleDeleteMessageItem = async (params: JobVo) => {
  await useHandleData(deleteJobApi, { id: params.id! }, `删除【${params.title}】岗位信息`);
  pTable.value.getTableList();
};

const handleRefresh = () => {
  ElMessage.info("正在建设中...");
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};

const jvDialogRef = ref();
const handleOpenViewWorkers = (rowData?: { id: string }) => {
  if (rowData.viewCnt) {
    let params = {
      rowData: { ...rowData }
    };
    jvDialogRef.value.acceptParams(params);
  } else {
    ElMessage.info("暂无工友浏览岗位，请查看如何提升浏览数的方法.");
  }
};

const jwDialogRef = ref();
const handleOpenApplyWorkers = (rowData?: { id: string }) => {
  if (rowData.applyCnt) {
    let params = {
      rowData: { ...rowData }
    };
    jwDialogRef.value.acceptParams(params);
  } else {
    ElMessage.info("暂无工友申请岗位，请查看如何提升申请数的方法.");
  }
};
</script>
<style scoped lang="scss">
.info-item-box {
  display: flex;
  padding: 0.25rem;
  flex-direction: column;
  width: 100%;
  height: 100%;
  & h1,
  h2,
  h3 {
    margin: 0;
  }
  //   background-color: rgb(250, 250, 250);
  //   border: 1px solid rgb(223, 223, 223);
  //   box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
  //   border-radius: 0.25rem;

  .item-top-bar {
    width: 100%;
    display: flex;

    .title-bar {
      flex: 1;
      display: flex;
      padding-left: 0.25rem;
      font-size: 1.2rem;
    }
    .operation-bar {
      color: rgb(116, 116, 116);
      font-size: 1.2rem;
      justify-content: flex-end;
      & i {
        margin: 0.25rem;
        cursor: pointer;
        & :hover {
          color: rgb(51, 51, 51);
        }
      }
    }
  }

  .tip-bar {
    width: 100%;
    display: flex;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    color: rgb(172, 172, 172);
    font-size: 14px;
  }
}

.info-view-box {
  display: flex;
  // height: 80%;
  // align-items: center;
  // justify-content: center;

  .info-viewcnt-box {
    border: 1px solid var(--el-color-primary-light-9);
    width: 50%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin: 3px 1.2rem;
    border-radius: 10px;
    // align-items: center;
    // justify-content: center;

    .vcnt-number {
      // border: 1px solid red;
      font-size: 1.2rem;
      height: 40px;
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .vcnt-text {
      font-size: 0.8rem;
      font-weight: 600;
      color: rgb(180, 170, 170);
      // border: 1px solid red;
    }
  }

  .info-viewcnt-box:hover {
    background-color: var(--el-color-primary-light-9);
  }
  .info-rsmcnt-box {
    @extend .info-viewcnt-box;
  }
}

.info-opt-box {
  //   border: 1px solid rgb(223, 223, 223);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .opt-item {
    width: 8rem;
    height: 3rem;
    border-radius: 4px;
    border: 2px solid rgb(250, 136, 30);
    background-color: white;
    margin: 0.5rem;
    line-height: 3rem;
    text-align: center;
    font-weight: bold;
    color: rgb(250, 136, 30);
    &:hover {
      cursor: pointer;
      background-color: rgb(250, 136, 30);
      color: white;
    }
  }
}

.welfare-tip-bar {
  // border: 1px solid red;
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 0.25rem;

  h3 {
    // border: 1px solid red;
    font-weight: 600;
  }

  span {
    margin-left: 0.25rem;
  }
}

.tag-bar {
  width: 100%;
  display: flex;
  margin-top: 0.5rem;
  padding-left: 0.25rem;
  & .el-tag {
    margin-right: 0.5rem;
  }
}

.time-box {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgb(180, 170, 170);
}
</style>
